<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.UUID"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>设备监测管理系统</title>
	<link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/demo/demo.css">
    
    <script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/jquery.min.js"></script>
	<script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<!-- script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script-->

	<script type="text/javascript">
	// 周期请求最新设备参数
		function ReqCurrentState(){     
        	$.ajax({       
	            url:'<%=this.getServletContext().getContextPath()%>/DeviceState/StateRefresh!GetCurrentState',  
	            type:'post',  
	            data:{},  
	            dataType:'json',          
	            success:function (devStateJson) {
	            	//alert(devStateJson.temperature);
	            	$("#HallAirTemp").html( devStateJson.temperature + "℃");	                         	              
	            },
	            complete:function( XMLHttpRequest, textStatus ){
	            	//alert("complete");   
	            },
	            error:function( XMLHttpRequest, textStatus, errorThrown){
	            	alert( "error:"+ errorThrown );
	            }    
        	});
				
	}	
	
	ReqCurrentState();
	setInterval(ReqCurrentState,3000);
	
	
	</script>

</head>
<body> 
    <div><h2 style="width:800px;text-align:center">XXXX自助区</h2></div>
    
    <div style="height:600px">
    <div style="width:1200px;height:470px;">
        <div style="float:left;width:375px;height:330px;margin:20px 0px;">        
            <div sytle="width:100%;text-align:center;"><b>大厅空调</b></div>
            <div style="width:350;height:400px;border:1px solid #09C;border-radius:25px;bordercolor:#a1d0fe;margin:10px">            
                <table style="width:320px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:15px">
            
                    <tr>
                        <td colspan="2">自动</td>
                        <td colspan="2" rowspan="2" ><div id="HallAirTemp">0 ℃</div></td>
                    </tr>

                    <tr>
                        <td colspan="2">制冷</td>
                    </tr>
                    <tr>
                        <td colspan="2">停止</td>
                        <td>电源</td>
                        <td><button>O</button></td>
                    </tr> 
                </table>
                <!--中间开关-->  
                <div style="height:50px;text-align:center;vertical-align:middle">
                    <button style="width:100px">开</button>
                    <button style="width:100px">关</button>
                </div>
                <!--控制方式等-->
                <table style="width:320px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:10px">
        
                    <tr>
                        <td colspan="3" text-align="right" width="30%">控制方式</td>
                        <td colspan="4" ><button>自动/手动</button></td>
                    </tr>

                    <tr>
                        <td colspan="3" style=";text-align:right;width:150px;">设定温度(℃)</td>
                        <td colspan="2"><input type="edit" value="24" /></td>
                        <td>                    
                            <button>+</button>
                                
                        </td>
                        <td>                
                            <button>-</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" text-align="right">开机温度(℃)</td>
                        <td colspan="2"><input type="edit" value="24" /></td>
                        <td colspan="2">                    
                            <button>设定</button>
                        </td>
                    </tr>
                     <tr>
                        <td colspan="3" text-align="right">关机温度(℃)</td>
                        <td colspan="2"><input type="edit" value="24" /></td>
                        <td colspan="2">                    
                            <button>设定</button>
                        </td>
                    </tr>
                </table>

                <div style="text-align:center">  
                    <button>温度历史曲线</button>
                </div>
            </div>
        </div>
        <div style="float:left;width:375px;height:330px;margin:20px 0px;">    
            <div sytle="width:100%;text-align:center;"><b>机房空调</b></div>            
            <div style="width:350;height:400px;border:1px solid #09C;border-radius:15px;bordercolor:#ddedfb;margin:10px">
                <table style="width:320px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:15px">
            
                    <tr>
                        <td colspan="2">自动</td>
                        <td colspan="2" rowspan="2" >0 ℃</td>
                    </tr>

                    <tr>
                        <td colspan="2">制冷</td>
                    </tr>
                    <tr>
                        <td colspan="2">停止</td>
                        <td>电源</td>
                        <td><button>O</button></td>
                    </tr> 
                </table>
                <!--中间开关-->  
                <div style="height:50px;text-align:center;vertical-align:middle">
                    <button style="width:100px">开</button>
                    <button style="width:100px">关</button>
                </div>
                <!--控制方式等-->
                <table style="width:320px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:10px">
        
                    <tr>
                        <td colspan="3" text-align="right" width="30%">控制方式</td>
                        <td colspan="4" ><button>自动/手动</button></td>
                    </tr>

                    <tr>
                        <td colspan="3" text-align="right" width="30%">设定温度(℃)</td>
                        <td colspan="2"><input type="edit" value="24" /></td>
                        <td>                    
                            <button>+</button>
                                
                        </td>
                        <td>                
                            <button>-</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" text-align="right">开机温度(℃)</td>
                        <td colspan="2"><input type="edit" value="24" /></td>
                        <td colspan="2">                    
                            <button>设定</button>
                        </td>
                    </tr>
                     <tr>
                        <td colspan="3" text-align="right">关机温度(℃)</td>
                        <td colspan="2"><input type="edit" value="24" /></td>
                        <td colspan="2">                    
                            <button>设定</button>
                        </td>
                    </tr>
                </table>

                <div style="text-align:center">  
                    <button>温度历史曲线</button>
                </div>
            </div>
        </div>

        <div style="float:left;width:350px;margin:20px 0px;">
            <div style="width:150;height:400px;border:0px solid #09C;border-radius:15px;bordercolor:#ddedfb;margin:10px;margin-top:100px;">

                <div style="width:100px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:15px">               
                    <text>烟感</text>
                    <button>O</button>
                </div>

                <div style="width:100px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:15px">       
                <div>        
                    <text>灯箱</text>
                    <button>开</button>
                </div>
                <div>
                    <button>O</button>
                    <button>关</button>
                </div>
            </div>
            
            <div style="width:100px;border:1px solid #09C; border-radius:6px;background:#ddedfb;text-align:center;margin:15px">       
                <div>        
                    <text>照明</text>
                    <button>开</button>
                </div>
                <div>
                    <button>O</button>
                    <button>关</button>
                </div>
            </div>
            </div>
               
            
        </div>
    </div>
    <table style="width:800px;height:150px;border:1px solid #09C;border-radius:25px;bordercolor:#a1d0fe;margin:10px">
        <tr>
            <td>输入电压</td>
            <td><input type="text" value="0" /></td>
            <td>V</td>

            <td>输出电压</td>
            <td><input type="text" value="0" /></td>
            <td>V</td>

            <td><button>O</button></td>
            <td>机器状态</td>
            
            <td><button>O</button></td>
            <td>自测状态</td>
        </tr>

        <tr>
            <td>负载百分比</td>
            <td><input type="text" value="0" /></td>
            <td>%</td>

            <td>输入频率</td>
            <td><input type="text" value="0" /></td>
            <td>Hz</td>

            <td><button>O</button></td>
            <td>故障或损坏</td>
            
            <td><button>O</button></td>
            <td>旁路供电</td>
        </tr>

        <tr>
            <td>电池电压</td>
            <td><input type="text" value="0" /></td>
            <td>%</td>

            <td>系统内部温度</td>
            <td><input type="text" value="0" /></td>
            <td>℃</td>

            <td><button>O</button></td>
            <td>电池低</td>
            
            <td><button>O</button></td>
            <td>市电供电</td>
        </tr>
    </table> 
    </div>
</body>

</html>